<template>
  <div ref="print">
    <a-drawer
      placement="right"
      :closable="false"
      :maskClosable="true"
      destroyOnClose
      @close="onDrawerClose"
      :visible="visible"
      width="100%"
      :title="title"
      :getContainer="false"
    >
      <div id="print" style="position: relative;font-size:12px;padding-top: 30px;">
        <div class="qrcode" ref="qrCodeUrl"></div>
        <a-row :gutter="20" style="width: 100%;height: 35px;font-size:14px;margin-bottom: 20px">
          <a-col :span="10"> 收货单号：{{ entity.Code }} </a-col>

          <a-col :span="10"> 收货日期：{{ entity.RecData }} </a-col>
        </a-row>
        <a-row :gutter="20" style="width: 100%;height: 35px;font-size:14px;margin-bottom: 30px;">
          <a-col :span="10"> 供货单位：{{ entity.SuppName }} </a-col>
        </a-row>
        <a-table
          ref="table"
          :columns="columns"
          :rowKey="row => row.Id"
          :pagination="false"
          :dataSource="dataArr"
          :loading="loading"
          :bordered="true"
          size="small"
        >
          <template slot="dataIndex" slot-scope="text, record, index">
            <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
          </template>
        </a-table>
      </div>
      <div style="height: 50px;"></div>
      <div
        :style="{
          position: 'fixed',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 9999
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onDrawerClose">取消</a-button>
        <a-button type="primary" v-print="'#print'">打印</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import moment from 'moment'
export default {
  data() {
    return {
      columns: [
        {
          title: '物品编号',
          dataIndex: 'Code'
        },

        { title: '物品名称', dataIndex: 'Name' },
        {
          title: '物品规格',
          dataIndex: 'Spec'
        },
        {
          title: '单位',
          dataIndex: 'UnitGroupName'
        },
        {
          title: '数量',
          dataIndex: 'RecNum',

          align: 'right'
        },
        { title: '单价', dataIndex: 'Price', align: 'right' },
        { title: '金额', dataIndex: 'Amount', align: 'right' },
        { title: '税率%', dataIndex: 'Rate', align: 'right' },
        {
          title: '批次管理',
          // width: '50px',
          dataIndex: 'IsBatch',
          customRender: value => {
            return value ? '是' : '否'
          }
        },
        {
          title: '批次号',
          dataIndex: 'Batch'
        },
        {
          title: '生产日期',
          dataIndex: 'Starttime'
          // width: '60px'
        },
        {
          title: '保质期单位',
          dataIndex: 'PeriodOfValidityUnit'
          // width: '60px'
        },
        {
          title: '保质期',
          dataIndex: 'PeriodOfValidity',
          align: 'right'
          // width: '60px'
        },
        {
          title: '失效日期',
          dataIndex: 'Endtime'
          // width: '60px'
        }
      ],
      loading: false,
      visible: false,
      entity: {},
      dataArr: [],
      ProductionOrderListObj: {},
      data: [],
      datamain: [],
      queryParam: {},
      dataList: [],
      title: '',
      QrCode: '',
      pagination: {
        current: 1,
        pageSize: 500,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['500', '1000', '1500'], //设置pageSize的可选值，页面啊可以通过下拉框进行选择
        showSizeChanger: true,
        onShowSizeChange: (current, pageSize) => {
          this.pageSize = pageSize
        }
      }
    }
  },
  methods: {
    creatQrCode(qText, div) {
      var ar = new QRCode(div, {
        text: qText, // 需要转换为二维码的内容
        width: 80,
        height: 80,
        colorDark: '#000000',
        colorLight: '#ffffff'
      })
      console.log(ar)
    },
    FaType(k) {
      if (k == 'Product') return '	产成品入库'
      else if (k == 'Return') return '	销售退货'
      else if (k == 'Purchase') return '采购收货'
    },
    creatQrCodenew(qText, div) {
      var qrcode = new QRCode(div, {
        text: qText,
        width: 100,
        height: 100,
        colorDark: '#000000',
        colorLight: '#ffffff'
      })
    },
    getDataList() {
      console.log(this.dataList)
      this.$nextTick(() => {
        this.dataList.forEach((item, index) => {
          console.log(item.QRCode)
          this.creatQrCodenew(item.QrCode, this.$refs['listQrcode'][index])
        })
      })
    },
    async openDrawer(id, title) {
      this.title = title
      this.visible = true
      await this.$http.post('/TD/TD_Receiving/GetReceivingData?ReceId=' + id, {}).then(resJson => {
        this.entity = resJson.Data
        console.log('表格', this.entity)
        this.entity.OrderData = moment(this.entity.OrderData).format('YYYY-MM-DD')
        this.entity.RecData = moment(this.entity.RecTime).format('YYYY-MM-DD')
        resJson.Data.RecDetailMaterial.forEach((item, index) => {
          this.$set(item, 'rowId', new Date().valueOf() + index + '')
          this.$set(item, 'Endtime', item.EndDate ? moment(item.EndDate).format('YYYY-MM-DD') : null)
          this.$set(item, 'Starttime', item.StartDate ? moment(item.StartDate).format('YYYY-MM-DD') : null)
          // item.Rate = item.Rate ? item.Rate + '' : ''
        })

        this.dataArr = [...resJson.Data.RecDetailMaterial]
        this.$nextTick(() => {
          this.creatQrCodenew(this.entity.QrCode, this.$refs['qrCodeUrl'])
        })
      })
    },
    onDrawerClose() {
      this.visible = false
      this.dataList = []
    }
  }
}
</script>

<style scoped>
.qrcode {
  width: 101px;
  height: 101px;
  position: absolute;
  top: 30px;
  right: 15%;
  border: 1px solid #000;
}
</style>
